<!--组件拆分-->
<!--为了避免body中的内容庞大难以维护-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>simple</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="app">
    <div>
      <input v-model="inputValue">
      <button @click="handleSubmit">提交</button>
    </div>

    <todo-item
      v-for="(item,index) in todos"
      :content="item"
    >

    </todo-item><!--kekab或pescal风格-->
  </div>

  <script>
    // 全局组件
    Vue.component('todo-item', {
      template: '<li>{{content}}</li>',
      props: ['content', 'key'],
      // 组件之间作用域独立，子组件不能直接引用父组件的值，所以props作为访问接口。
      // 好像后端类的 props定义属性，setter方法，v-bind接收参数传入数据。
      // 每一个组件都是一个vue实例

    })

    // 局部组件
    // var todoItem = {
    //   template: '<li>吃饭</li>'
    // }

    new Vue({
      el: '#app',
      name: 'app',
      // components: {
      //   todoItem: todoItem
      // },
      // template: {}, // 根组件的模板就是挂载点下包括的东西
      data: {
        inputValue: '',
        todos: ['起床', '吃饭', 'lol'],
      },
      methods: {
        handleSubmit: function (){
          this.todos.push(this.inputValue)
          this.inputValue = ''
        }
      }
    })
  </script>

<!-- data是个函数 https://www.cnblogs.com/wangjiachen666/p/9876266.html-->
</body>
</html>